<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="base::common_head(~{::title},~{})">
    <title>用户管理</title>
</head>
<body>
<div th:replace="~{base::navbar}"></div>
<div class="container-fluid all">
    <div class="sidebar">
        <ul class="nav" th:include="base::sidebar(~{::li})">
        </ul>
    </div>
    <div class="maincontent row">
        <ul class="breadcrumb">
            <li class="active">用户管理</li>
        </ul>
        <div class="col-sm-12">
            <div class="jumbotron">
                <button type="button" class="btn btn-primary" id="btn_add_user">添加用户</button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>邮箱</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user:${users.content}">
                        <th th:text="${user.id}"></th>
                        <td th:text="${user.username}"></td>
                        <td th:text="${user.email}"></td>
                        <td th:text="${user.createTime}"></td>
                        <td th:text="${user.updateTime}"></td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm" name="btn_edit" th:value="${user.id}">编辑</button>&nbsp;&nbsp;
                            <button type="button" class="btn btn-danger btn-sm" name="btn_delete" th:value="${user.id}">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_user" tabindex="-1" role="dialog" aria-labelledby="modalUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal_user_title"></h4>
            </div>
            <div class="modal-body">
                <form id="form_user" th:action="@{/user}" class="form-horizontal" method="post">
                    <input type="hidden" name="id" id="modal_user_id">
                    <div class="form-group">
                        <label for="modal_input_username" class="control-label  col-sm-3">用户名</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="username" id="modal_input_username" maxlength="20" autocomplete="new-password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_password" class="control-label  col-sm-3">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" name="password" id="modal_input_password" maxlength="16" autocomplete="new-password"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal_input_email" class="control-label  col-sm-3">邮箱</label>
                        <div class="col-sm-6">
                            <input type="email" class="form-control" name="email" id="modal_input_email" maxlength="50" autocomplete="new-password"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn_user_submit">提交</button>
            </div>
        </div>
    </div>
</div>
<div th:replace="~{base::script}"></div>
<script th:inline="javascript">
    var failMessage = /*[[${userFailMessage}]]*/ "";
    if (failMessage) {
        toastr["error"](failMessage);
    }
    var modalUseId = $("#modal_user_id");
    var modalInputUsername = $("#modal_input_username");
    var modalInputPassword = $("#modal_input_password");
    var modalInputEmail = $("#modal_input_email");
    var formUser = $("#form_user");
    var addUserModal = $("#modal_user");
    var btnUserSubmit = $("#btn_user_submit");
    /*<![CDATA[*/
    var contextPath = /*[[${#httpServletRequest.getContextPath()}]]*/ null;
    /*]]>*/

    $("button[name='btn_edit']").each(function () {
        $(this).on("click", function () {
            var btn = $(this);
            btn.attr("disabled", "disabled");
            addUserModal.find("#modal_user_title").html("编辑用户");
            $.ajax({
                type: "GET",
                dataType: "json",
                url: contextPath + "user/" + btn.val(),
                success: function (data) {
                    if (10000 === data.code) {
                        modalUseId.val(data.data.id);
                        modalInputUsername.val(data.data.username);
                        modalInputEmail.val(data.data.email);
                        modalInputPassword.val(data.data.password);
                    } else {
                        toastr["error"](data.msg);
                    }
                },
                error: function (textStatus, errorThrown) {
                    toastr["error"](textStatus + " " + errorThrown.toString());
                },
                complete: function () {
                    console.log(btn.html());
                    btn.removeAttr("disabled");
                    addUserModal.modal();
                }
            });
        });
    });
    $("button[name='btn_delete']").on("click", function () {
        var btn = $(this);
        swal({
            title: "你确定?",
            text: "删除之后，该数据将无法再恢复!",
            icon: "warning",
            buttons: true,
            dangerMode: true
        }).then(function (willDelete) {
            if (willDelete) {
                $.ajax({
                    type: "DELETE",
                    dataType: "json",
                    url: contextPath + "/user/" + btn.val(),
                    success: function (data) {
                        if (10000 === data.code) {
                            window.location.href = contextPath + "users";
                        } else {
                            toastr["error"](data.msg);
                        }
                    },
                    error: function (textStatus, errorThrown) {
                        toastr["error"](textStatus + " " + errorThrown.toString());
                    },
                    complete: function () {
                    }
                });
            }
        });
    });

    $("#btn_add_user").on("click", function () {
        addUserModal.find("#modal_user_title").html("添加用户");
        addUserModal.modal();
    });

    formUser.find("input").each(function () {
        $(this).on("focus", function () {
            $(this).parents(".form-group").removeClass("has-error");
        });
    });

    addUserModal.on("hidden.bs.modal", function () {
        formUser.find(".form-group").removeClass("has-error");
        formUser.find("input").val("");
    });

    btnUserSubmit.on("click", function () {
        var submit = true;
        formUser.find("input[type!='hidden']").each(function () {
            if ($(this).val().trim() === "") {
                submit = false;
                $(this).parents("div .form-group").addClass("has-error");
            }
        });
        if (submit) {
            addUserModal.modal();
            formUser.submit();
        }
    });

</script>
</body>
</html>